<template>
<div class="main">
	<content_top title="权限设置">
		<!-- <Button slot="right">返回</Button> -->
		<div slot="right" style="display: inline-block;float: right;margin-left:5px;">
			<Button @click="$router.back()"><Icon type="ios-arrow-back" size="16" style="margin-right:5px;" />返回</Button>
		</div>
	</content_top>
	
	<div class="g_box">
		<div class="g_head">
			<h3>当前权限组：出纳组</h3>
			
		</div>
		<div class="g_box_con" style="    padding: 30px;">
			<div class="box_ti">
				<h3>公司主体</h3>
			</div>
			<div class="box_con">
				<div class="row_box">
					<div class="left_box">
						<span class="tit">查询权：</span>
						<div class="act_box">
							<Button @click="add_company('queryList')">添加公司主体</Button>
						</div>
					</div>
					<div class="company_list">
						<div class="item" v-for="(val,index) in cinfo.queryList">
							<span>{{val.name}}</span>
							<a class="close" @click="del('queryList',index)">删除</a>
						</div>
					</div>
				</div>
				<div class="row_box">
					<div class="left_box">
						<span class="tit">操作权：</span>
						<div class="act_box">
							<Button @click="add_company('actionList')">添加公司主体</Button>
						</div>
					</div>
					<div class="company_list">
						<div class="item" v-for="(val,index) in cinfo.actionList">
							<span>{{val.name}}</span>
							<a class="close" @click="del('actionList',index)">删除</a>
						</div>
					</div>
				</div>
			</div>
			<div class="box_ti">
				<h3>功能板块</h3>
			</div>
			<div class="box_con">
				<div style="margin-bottom: 20px;">
					<Checkbox v-model="is_all_sel" @on-change="all_item_change($event)" :true-value="1" :false-value="0">
						{{!is_all_sel?'选择全部板块':'取消全部板块'}}
					</Checkbox>
				</div>
				<div class="sbox" v-for="val in list">
					<div class="sbox_head">
						<Checkbox v-model="sels[val.code]" @on-change="parent_item_change($event,val.code)" :true-value="1" :false-value="0"><h3>{{val.name}}</h3></Checkbox>
					</div>
					<div class="sbox_con">
						<ul class='slist'>
							<li v-for="item in val.list">
								<Row class="row">
									<Col span="12">
										<Checkbox v-model="sels[item.code]" :true-value="1" :false-value="0" @on-change="item_change($event,item.code)">{{item.name}}</Checkbox>
									</Col>
									<Col span="12">
										<Checkbox v-model="sels[item.code+'_1']" :true-value="1" :false-value="0" @on-change="item_change_val($event,item.code)">查询权</Checkbox>
										<Checkbox v-model="sels[item.code+'_2']" :true-value="1" :false-value="0" @on-change="item_change_val($event,item.code)">操作权</Checkbox>
									</Col>
								</Row>
							</li>
							
						</ul>
					</div>
				</div>
			</div>
			
			<div class="mact_box">
				<Button type="primary" @click="save">保存</Button>
			</div>
		</div>
	</div>
	
	<company_box v-model="cinfo.show" @change="company_change"></company_box>
</div>
</template>

<script>
import company_box from './company';
import Vue from 'vue';


export default {
    data () {
		var self = this;
        return {
			cinfo:{
				show:false,
				type:'',
				queryList:[],
				actionList:[],
			},
			is_all_sel:true,
			list:[],
			sel:0,
			sels:{},
			id:0,
			info:{},
        };
    },
	components:{
		company_box
	},
	created(){
		var self = this;
		this.id = this.$route.params.id;
		
		this.get_privs_list(function(){
			self.load_data();
		});
	},
	watch:{
		sels:{
			handler(val){
				for (let key in val) {
						if ((val[key] == 1) && (key.split('_1').length>1 || key.split('_2').length>1)) {
							
							if (val[key] == 1){
								
								let key_val = key.split('_1')[0];

								if (key !== key_val) {
									val[key_val] = 1;
								}else{
									let key_value = key.split('_2')[0];
									val[key_value] = 1;
								}
							}

						}
				}
			},
			deep:true
		}
	},
    methods: {
		get_privs_list(call){
			var self = this;
			var postdata = {
				page:this.page,
				f:this.filter
			};
			Whttp.load('System/Privs/get_list',postdata,function(result){
			
				for(var i=0;i<result.length;i++){
					for(var j=0;j<result[i].list.length;j++){
					
						Vue.set(self.sels,result[i].list[j].code,0);
						Vue.set(self.sels,result[i].list[j].code+'_1',0);
						Vue.set(self.sels,result[i].list[j].code+'_2',0);
					}
					Vue.set(self.sels,result[i].code,0);
				}
				self.list = result
				typeof(call)=='function' && call();
			});
		},
		load_data(){
			var self = this;
			var postdata = {
				id:this.id
			};
			Whttp.load('System/Privgroup/get_info',postdata,function(result){
				self.info = result;
				
				var privs = result.privs.split(',');
				for(var i=0;i<privs.length;i++){
					Vue.set(self.sels,privs[i],1);
				}
				
				self.cinfo.queryList = result.query_list;
				self.cinfo.actionList = result.action_list;
				
			});
		},
		add_company(type){
			this.cinfo.type = type;
			this.cinfo.show = true;
		},
		company_change(list){
			if(this.cinfo.type=='queryList'){
				this.cinfo.queryList = this._getData(list);
			}
			else{
				this.cinfo.actionList = this._getData(list);
			}
		},
		del(type,index){
			
			if(type=='queryList'){
				this.cinfo.queryList.splice(index,1);
			}
			else{
				this.cinfo.actionList.splice(index,1);
			}
		},
		item_change(val,code){
			
			
			Vue.set(this.sels,code+'_1',val);
			Vue.set(this.sels,code+'_2',val);
			
		},
		save(){
			var privs = [];
			for(var i in this.sels){
				if(this.sels[i]==1){
					privs.push(i);
				}
				
			}
			var querys = [];
			var actions = [];
			
			for(var i=0;i<this.cinfo.queryList.length;i++){
				querys.push(this.cinfo.queryList[i].id);
			}
			
			for(var i=0;i<this.cinfo.actionList.length;i++){
				actions.push(this.cinfo.actionList[i].id);
			}
			
			
			var self = this;
			var postdata = {
				id:this.id,
				privs:privs.join(','),
				querys:querys.join(','),
				actions:actions.join(',')
			};
			
			Whttp.load('System/Privs/save_priv',postdata,function(result){
				alert('保存成功');
				
			});
		},
		parent_item_change(val,code){
			
			var self = this;
			for(var i=0;i<self.list.length;i++){
				if(self.list[i].code==code){
					
					for(var j in self.sels){
						if(j==''){
							continue;
						}

						if(j.substr(0,code.length)==code){
							
							Vue.set(self.sels,j,val);
						}
					}
					
					break;
				}
			}
			
		},
		all_item_change(val){
			var self = this;
			for(var i=0;i<self.list.length;i++){
				Vue.set(self.sels,self.list[i].code,val);
				for(var j=0;j<self.list[i].list.length;j++){
					Vue.set(self.sels,self.list[i].list[j].code,val);
					Vue.set(self.sels,self.list[i].list[j].code+'_1',val);
					Vue.set(self.sels,self.list[i].list[j].code+'_2',val);
				}
			}
		},
		item_change_val(val,code){
			if ( this.sels[code+'_1'] == 0 && this.sels[code+'_2'] == 0 ) {
				this.sels[code] = 0
			}
		},
    }
};
</script>

<style scoped>
	@import './edit.css';

</style>